<template>
  <div class="dashboard-container">
    <div class="container container6">
      <branches-scores-chart height="400px"></branches-scores-chart>
    </div>
    <div class="container container7">
      <scores-chart-m-b height="400px"></scores-chart-m-b>
    </div>
    <div class="container container7">
      <score-trend-chart height="300px"></score-trend-chart>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import BranchesScoresChart from '../components/scatter/BranchesScoresChart.vue'
import ScoresChartMB from '../components/radar/ScoresChartMB.vue'
import ScoreTrendChart from '../components/bar-line/ScoreTrendChart.vue'

@Component({
  name: 'CombinedCharts2',
  components: {
    BranchesScoresChart,
    ScoresChartMB,
    ScoreTrendChart
  }
})
export default class extends Vue {
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  .container {
    border: 1px solid #e3e3e3;
    margin-top: 1em;
  }

  .container4 {
    width: 400px;
  }

  .container5 {
    width: 500px;
  }

  .container6 {
    width: 600px;
  }

  .container7 {
    width: 700px;
  }
}

</style>
